<template>
  <div class="common-wrap">
    <div class="customerAdd">
      <MyForm
        v-model:formData="formData"
        v-model:columns="formColumns"
        :rules="rules"
        :porpModel="true"
        background="#fff"
        labelWidth="120"
        :expandConfiguration="[0]"
        :saveBtnLoading="saveBtnLoading"
        @submit="onSubmit"
      >
      </MyForm>
    </div>
  </div>
</template>

<script setup lang="tsx">
import { onMounted, ref, defineOptions, watch } from "vue";
import i18n from "@/lang/index.js";
import * as api from "@/api/index.js";
import {
  getSubZhEn,
  columnFilters,
  tabelColumnFilters,
  formatBankCard,
} from "@/utils/mUtils.js";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
const route = useRoute();
defineOptions({
  name: "CustomerAdd",
});
const formData = ref({
  channelCategoryList: [],
  creditList: [],
  contactList: [],
  coopList: [],
  compulsoryInsuranceFlag: "1",
  attachFileIdList: [],
  accountType: "0",
  cusBankAccountList: [],
  currentCompanyAccountList: [],
});
const rules = ref({
  channelCategory: [
    {
      required: true,
      trigger: ["blur", "change"],
    },
  ],
  customerCode: [{ required: true, trigger: ["blur", "change"] }],
  salesPlatform: [{ required: true, trigger: ["blur", "change"] }],
  belongSite: [{ required: true, trigger: ["blur", "change"] }],
  customerAbbr: [{ required: true, trigger: ["blur", "change"] }],
  customerNameZh: [{ required: true, trigger: ["blur", "change"] }],
  customerNameEn: [{ required: true, trigger: ["blur", "change"] }],
  provinceCityArea: [{ required: true, trigger: ["blur", "change"] }],
  compulsoryInsuranceFlag: [{ required: true, trigger: ["blur", "change"] }],
  customerTypeCode: [{ required: true, trigger: ["blur", "change"] }],
  vipLevelCode: [{ required: true, trigger: ["blur", "change"] }],
});
const saveBtnLoading = ref(false);
const formColumns = ref([
  {
    title: "基础信息",
    structure: [
      {
        title: "",
        content: [
          {
            x: 0,
            y: 0,
            w: 6,
            h: 1,
            i: "1",
            label: "业务类别",
            prop: "channelCategory",
            propCheck: "channelCategoryList",
            propCheckKey: {
              attributeCode: "subCode",
              attributeName: "subName",
            },
            type: "label_checkbox",
            options: [],
            props: {
              label: "subName",
              value: "subCode",
            },
            span: 6,
          },
          {
            x: 6,
            y: 0,
            w: 6,
            h: 1,
            i: "2",
            label: "客户代码",
            prop: "customerCode",
            type: "label_input",
            disabled: route.query.id ? true : false,
            span: 6,
          },
          {
            x: 12,
            y: 0,
            w: 6,
            h: 1,
            i: "3",
            label: "客户简称",
            prop: "customerAbbr",
            type: "label_input",
            span: 6,
          },
          {
            x: 18,
            y: 0,
            w: 6,
            h: 1,
            i: "4",
            label: "海运业务员",
            prop: "oceanEmployeesList",
            textProp: "oceanEmployees",
            type: "label_input_emp_select",
            currRowKey: "employeeCode",
            rowKey: "empCode",
            listKey: "employeeName",
            multiple: true,
            columns: [
              {
                field: "divideRatio",
                title: "分成比例",
                fixed: "right",
                slots: {
                  default: ({ row }) => {
                    return [
                      <el-input-number
                        v-model={row.divideRatio}
                        max={100}
                        min={0}
                        controls={false}
                      ></el-input-number>,
                    ];
                  },
                },
              },
            ],
            props: {
              employeeCode: "empCode",
              employeeName: "empName",
              divideRatio: "divideRatio",
            },
            splice: "empName",
            bracket: "divideRatio",
            span: 6,
          },
          {
            x: 0,
            y: 1,
            w: 6,
            h: 1,
            i: "5",
            label: "客户类型",
            prop: "customerTypeCode",
            name: "customerTypeName",
            type: "label_select",
            options: [],
            props: {
              value: "subCode",
              label: "subName",
            },
            span: 6,
          },
          {
            x: 6,
            y: 1,
            w: 6,
            h: 1,
            i: "6",
            label: "客户名称（中）",
            prop: "customerNameZh",
            type: "label_input",
            span: 6,
          },
          {
            x: 12,
            y: 1,
            w: 6,
            h: 1,
            i: "7",
            label: "统一信用代码",
            prop: "unifiedSocialCreditCode",
            type: "label_input",
            disabled: false,
            span: 6,
          },
          {
            x: 18,
            y: 1,
            w: 6,
            h: 1,
            i: "8",
            label: "海运客服",
            prop: "oceanCustomerServiceList",
            textProp: "oceanCustomer",
            type: "label_input_emp_select",
            currRowKey: "employeeCode",
            rowKey: "empCode",
            listKey: "employeeName",
            multiple: false,
            multipleSingle: true,
            props: {
              employeeCode: "empCode",
              employeeName: "empName",
            },
            splice: "empName",
            span: 6,
          },
          {
            x: 0,
            y: 2,
            w: 6,
            h: 1,
            i: "9",
            label: "销售平台",
            prop: "salesPlatform",
            multipleProp: "salesPlatformList",
            type: "label_select",
            ilterable: true,
            multiple: true,
            collapseTags: true,
            options: [],
            props: {
              label: "subName",
              value: "subCode",
            },
            multipleProps: {
              attributeCode: "subCode",
              attributeName: "subName",
            },
            span: 6,
          },
          {
            x: 6,
            y: 2,
            w: 6,
            h: 1,
            i: "10",
            label: "客户名称（英）",
            prop: "customerNameEn",
            type: "label_input",
            span: 6,
          },
          {
            x: 12,
            y: 2,
            w: 6,
            h: 1,
            i: "11",
            label: "法定代表人",
            prop: "legalRepresentative",
            type: "label_input",
            disabled: false,
            span: 6,
          },
          {
            x: 18,
            y: 2,
            w: 6,
            h: 1,
            i: "12",
            label: "空运业务员",
            prop: "airEmployeesList",
            textProp: "airEmployees",
            type: "label_input_emp_select",
            currRowKey: "employeeCode",
            rowKey: "empCode",
            listKey: "employeeName",
            multiple: true,
            columns: [
              {
                field: "divideRatio",
                title: "分成比例",
                fixed: "right",
                slots: {
                  default: ({ row }) => {
                    return [
                      <el-input-number
                        v-model={row.divideRatio}
                        max={100}
                        min={0}
                        controls={false}
                      ></el-input-number>,
                    ];
                  },
                },
              },
            ],
            props: {
              employeeCode: "empCode",
              employeeName: "empName",
              divideRatio: "divideRatio",
            },
            splice: "empName",
            bracket: "divideRatio",
            span: 6,
          },
          {
            x: 0,
            y: 3,
            w: 6,
            h: 1,
            i: "13",
            label: "VIP等级",
            prop: "vipLevelCode",
            name: "vipLevelName",
            type: "label_select",
            options: [],
            props: {
              value: "subCode",
              label: "subName",
            },
            span: 6,
          },
          {
            x: 6,
            y: 3,
            w: 6,
            h: 1,
            i: "14",
            label: "国家/省/市/区",
            propSelectCode: "countryCode",
            propSelectName: "countryName",
            propSelectAdd: "countryAdd",
            prop: "provinceCityArea",
            type: "label_province_city_area",
            propSelectOptions: [],
            propSelectPlaceholder: "国家",
            propsSelect: {
              value: "countryCode",
              label: "countryName",
              keyAdd: "countryAdd",
            },
            labelKey: {
              countryName: "countryName",
              provinceName: "provinceName",
              cityName: "cityName",
              areaName: "areaName",
            },
            parmasKey: {
              provinceName: "provinceName",
              provinceCode: "provinceCode",
              cityName: "cityName",
              cityCode: "cityCode",
              areaName: "areaName",
              areaCode: "areaCode",
            },
            options: [],
            props: {
              value: "areaCode",
              label: "areaName",
              children: "children",
            },
            placeholder: "省/市/区(县)",
            span: 6,
            onCascaderChange: (argeObj) => {
              formData.value = { ...formData.value, ...argeObj };
            },
          },
          {
            x: 12,
            y: 3,
            w: 6,
            h: 1,
            i: "15",
            label: "联系电话",
            prop: "contactPhone",
            type: "label_input",
            disabled: false,
            span: 6,
          },
          {
            x: 18,
            y: 3,
            w: 6,
            h: 1,
            i: "16",
            label: "空运客服",
            prop: "airCustomerServiceList",
            textProp: "airCustomerService",
            type: "label_input_emp_select",
            currRowKey: "employeeCode",
            rowKey: "empCode",
            listKey: "employeeName",
            multiple: false,
            multipleSingle: true,
            props: {
              employeeCode: "empCode",
              employeeName: "empName",
            },
            splice: "empName",
            span: 6,
          },
          {
            x: 0,
            y: 4,
            w: 6,
            h: 1,
            i: "17",
            label: "归属主体",
            prop: "belongSite",
            type: "label_select",
            multipleProp: "belongSiteList",
            ilterable: true,
            multiple: true,
            collapseTags: true,
            props: {
              label: "siteName",
              value: "siteCode",
            },
            multipleProps: {
              attributeCode: "siteCode",
              attributeName: "siteName",
            },
            options: [],
            handleSelectChange: (val) => {
              console.log(val);
            },
            span: 12,
          },
          {
            x: 6,
            y: 2,
            w: 6,
            h: 1,
            i: "30",
            label: "前缀",
            prop: "noPrefix",
            type: "label_input",
          },
          {
            x: 12,
            y: 4,
            w: 6,
            h: 1,
            i: "18",
            label: "企业规模",
            prop: "companySizeCode",
            name: "companySizeName",
            type: "label_select",
            options: [],
            props: {
              value: "subCode",
              label: "subName",
            },
            disabled: false,
            span: 6,
          },
          {
            x: 18,
            y: 4,
            w: 6,
            h: 1,
            i: "19",
            label: "海外仓业务员",
            prop: "overseaEmployeesList",
            textProp: "overseaEmployees",
            type: "label_input_emp_select",
            currRowKey: "employeeCode",
            rowKey: "empCode",
            listKey: "employeeName",
            multiple: true,
            columns: [
              {
                field: "divideRatio",
                title: "分成比例",
                fixed: "right",
                slots: {
                  default: ({ row }) => {
                    return [
                      <el-input-number
                        v-model={row.divideRatio}
                        max={100}
                        min={0}
                        controls={false}
                      ></el-input-number>,
                    ];
                  },
                },
              },
            ],
            props: {
              employeeCode: "empCode",
              employeeName: "empName",
              divideRatio: "divideRatio",
            },
            splice: "empName",
            bracket: "divideRatio",
            span: 6,
          },
          {
            x: 0,
            y: 5,
            w: 6,
            h: 1,
            i: "20",
            label: "强制保险",
            prop: "compulsoryInsuranceFlag",
            type: "label_radio",
            span: 6,
            props: {
              value: "value",
              label: "label",
            },
            options: [
              {
                label: "是",
                value: 1,
              },
              {
                label: "否",
                value: 0,
              },
            ],
          },
          {
            x: 6,
            y: 5,
            w: 6,
            h: 1,
            i: "21",
            label: "注册地址",
            prop: "customerRegisteredAddress",
            type: "label_input",
            disabled: false,
            span: 6,
          },
          {
            x: 12,
            y: 5,
            w: 6,
            h: 1,
            i: "22",
            label: "注册资金",
            prop: "registeredCapital",
            type: "label_input",
            disabled: false,
            span: 6,
          },
          {
            x: 18,
            y: 5,
            w: 6,
            h: 1,
            i: "23",
            label: "海外仓客服",
            prop: "overseaCustomerServiceList",
            textProp: "overseaCustomerService",
            type: "label_input_emp_select",
            currRowKey: "employeeCode",
            rowKey: "empCode",
            listKey: "employeeName",
            multiple: false,
            multipleSingle: true,
            props: {
              employeeCode: "empCode",
              employeeName: "empName",
            },
            splice: "empName",
            span: 6,
          },
          {
            x: 0,
            y: 6,
            w: 6,
            h: 2,
            i: "24",
            label: "经营地址",
            prop: "customerBusinessAddress",
            type: "label_input",
            inputType: "textarea",
            span: 6,
          },
          {
            x: 6,
            y: 6,
            w: 6,
            h: 2,
            i: "25",
            label: "文件列印地址",
            prop: "fileDesc",
            inputType: "textarea",
            type: "label_input",
            span: 6,
          },
          {
            x: 12,
            y: 6,
            w: 6,
            h: 2,
            i: "26",
            label: "服务要求",
            prop: "serviceRequire",
            inputType: "textarea",
            type: "label_input",
            span: 6,
          },
          {
            x: 18,
            y: 6,
            w: 6,
            h: 2,
            i: "27",
            label: "财务备注",
            prop: "financialRemark",
            inputType: "textarea",
            type: "label_input",
            span: 6,
          },
          {
            x: 0,
            y: 7,
            w: 24,
            h: 2,
            i: "28",
            label: "附件上传",
            prop: "attachFileIdList",
            type: "label_upload",
            listKey: "original",
            sourceNo: "customerCode",
            props: {
              label: "original",
              busTypeCode: "015001",
              busTypeName: "客户资料",
            },
            span: 24,
          },
          // {
          //   label: "最近一次下单时间",
          //   prop: "latestOrderDate",
          //   type: "label_input",
          //   span: 6,
          // },
          // {
          //   label: "新客户标识",
          //   prop: "newCusFlag",
          //   type: "label_input",
          //   span: 6,
          // },
          {
            x: 0,
            y: 9,
            w: 12,
            h: 2,
            i: "29",
            label: "备注",
            prop: "remark",
            inputType: "textarea",
            type: "label_input",
            span: 12,
          },
        ],
      },
    ],
  },
  {
    title: "联系人",
    structure: [
      {
        type: "tabel",
        tableId: "contactList",
        tableIndex: 0,
        prop: "contactList",
        keepSourceKey: "contactName",
        hasPermiAdd: ["common:customer:contactAdd"],
        hasPermiEdit: ["common:customer:contactEdit"],
        hasPermiDelete: ["common:customer:contactDelete"],
        columns: [
          {
            type: "checkbox",
            width: 50,
            fixed: "left",
            align: "center",
          },
          {
            field: "contactName",
            editRender: {},
            slots: { edit: "input_edit" },
            title: "姓名",
          },
          {
            field: "contactNickName",
            editRender: {},
            slots: { edit: "input_edit" },
            title: "昵称",
          },
          {
            field: "postName",
            editRender: {},
            slots: { edit: "input_edit" },
            title: "岗位",
          },
          {
            field: "contactPhone",
            editRender: {},
            slots: { edit: "input_edit" },
            title: "电话",
          },
          {
            field: "contactEmail",
            editRender: {},
            slots: { edit: "input_edit" },
            title: "邮箱",
          },
        ],
        multipleSelection: [],
        buttonType: ["add", "delete"],
        batchDelete: true,
      },
    ],
    hide: false,
  },
  {
    title: "合作单位",
    structure: [
      {
        type: "tabel",
        tableId: "coopList",
        tableIndex: 1,
        prop: "coopList",
        hasPermiAdd: ["common:customer:coopAdd"],
        hasPermiEdit: ["common:customer:coopEdit"],
        hasPermiDelete: ["common:customer:coopDelete"],
        columns: [
          {
            type: "checkbox",
            width: 50,
            fixed: "left",
            align: "center",
          },
          {
            field: "coopCustomerTypeCode",
            title: "类型",
            editRender: {},
            params: {
              clearable: true,
              options: [],
              change: (val, rowIndex, row, options) => {
                if (!val.value) {
                  return;
                }
                if (val.value && val.value.includes("017")) {
                  row.coopType = "1";
                } else {
                  row.coopType = "0";
                }
                row.coopCustomerTypeName = val.option.label;
              },
              key: "subName",
              value: "subCode",
              label: "subName",
              transfer: true,
              clearKey: {
                sourceCode: "customerCode",
                name: "name",
                coopType: "coopType",
                coopCustomerTypeName: "coopCustomerTypeName",
                customerCode: "customerCode",
                customerName: "customerNameZh",
                countryCode: "countryCode",
                countryName: "countryName",
                countryAdd: "countryAdd",
                areaCode: "areaCode",
                areaName: "areaName",
                cityCode: "cityCode",
                cityName: "cityName",
                provinceCode: "provinceCode",
                provinceName: "provinceName",
                businessAddress: "businessAddress",
                fileDesc: "fileDesc",
                provinceCityArea: "provinceCityArea",
              },
            },

            slots: { edit: "select_edit" },
            formatter: ({ cellValue, row }) => {
              return row.coopCustomerTypeName;
            },
          },
          {
            field: "name",
            title: "客商名称",
            editRender: {},
            slots: { edit: "remoteSelect_edit" },
            params: {
              params: {
                searchKey: "keyword",
                name: "customerNameZh",
                keyValue: "customerCode",
                showCustomizedOption: true,
                queryId: true,
                abbreviation: "customerCode",
                displayKey: {
                  coopTypeStr: "coopTypeStr",
                  cusProviderAbbr: "customerAbbr",
                },
                dynamicParameter: {
                  coopType: "coopType",
                },
              },
              handleRemoteChange: (data, rowIndex, row) => {
                row.provinceCityArea = [
                  row.provinceCode,
                  row.cityCode,
                  row.areaCode,
                ];
              },
              paramsKey: {
                sourceCode: "customerCode",
                customerCode: "customerCode",
                customerNameZh: "customerNameZh",
                countryCode: "countryCode",
                countryName: "countryName",
                countryAdd: "countryAdd",
                areaCode: "areaCode",
                areaName: "areaName",
                cityCode: "cityCode",
                cityName: "cityName",
                provinceCode: "provinceCode",
                provinceName: "provinceName",
                businessAddress: "businessAddress",
                fileDesc: "fileDesc",
                provinceCityArea: "provinceCityArea",
              },
              apiModule: api.default.common.customers.selectAllCoopList,
            },
            formatter: ({ cellValue, row }) => {
              row.name = row.customerNameZh;
              return row.customerNameZh;
            },
          },
          {
            field: "customerCode",
            title: "客商代码",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            title: "国家/省/市/区",
            field: "countryCode",
            params: {
              propSelectName: "countryName",
              propSelectAdd: "countryAdd",
              prop: "provinceCityArea",
              propSelectPlaceholder: "国家",
              placeholder: "省/市/区(县)",
              propsSelect: {
                value: "countryCode",
                label: "countryName",
                keyAdd: "countryAdd",
              },
              props: {
                value: "areaCode",
                label: "areaName",
                children: "children",
              },
              onCascaderChange: (argeObj, row) => {
                row.provinceCode = argeObj.provinceCode || "";
                row.cityCode = argeObj.cityCode || "";
                row.areaCode = argeObj.areaCode || "";
                row.provinceName = argeObj.provinceName || "";
                row.cityName = argeObj.cityName || "";
                row.areaName = argeObj.areaName || "";
              },
            },
            editRender: {},
            slots: { edit: "province_city_area_edit" },
            formatter: ({ row }) => {
              return `${row.countryName || "-"}/${row.provinceName || "-"}/${
                row.cityName || "-"
              }/${row.areaName || "-"}`;
            },
            width: 300,
          },
          {
            field: "businessAddress",
            title: "详细地址",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            field: "postalCode",
            title: "邮编",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            field: "contactName",
            title: "联系人",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            field: "contactPhone",
            title: "联系人电话",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            field: "contactEmail",
            title: "联系人邮箱",
            editRender: {},
            slots: { edit: "input_edit" },
          },
          {
            field: "fileDesc",
            title: "文件打印地址",
          },
        ],
        multipleSelection: [],
        editRules: {
          coopCustomerTypeCode: [
            {
              required: true,
              message: i18n.global.t("请选择类型"),
            },
          ],
          name: [
            {
              required: true,
              message: i18n.global.t("请选择客商类型"),
            },
          ],
        },
        buttonType: ["add", "delete"],
        batchDelete: true,
        keepSourceKey: "coopCustomerTypeCode",
      },
    ],
    hide: false,
  },
  {
    title: "信用控制",
    structure: [
      {
        type: "tabel",
        tableId: "creditList",
        prop: "creditList",
        hasPermiAdd: ["common:customer:creditAdd"],
        hasPermiEdit: ["common:customer:creditEdit"],
        hasPermiDelete: ["common:customer:creditDelete"],
        tableIndex: 2,
        columns: [
          {
            type: "checkbox",
            width: 50,
            fixed: "left",
            align: "center",
          },
          {
            field: "channelCategoryCode",
            title: "渠道类别",
            editRender: {},
            params: {
              options: [],
              change: (val, rowIndex, row, options) => {
                const siteCode = options.find(
                  (item) => item.subCode === row.channelCategoryCode
                ).subValue;
                getWebsiteData(siteCode, row);
                row.channelCategoryName = val.option.label;
              },
              key: "subName",
              value: "subCode",
              label: "subName",
              transfer: true,
            },
            slots: { edit: "select_edit" },
            formatter: ({ cellValue, row }) => {
              return row.channelCategoryName;
            },
          },
          {
            field: "belongSiteName",
            title: "所属公司",
          },
          {
            field: "settlementMethodCode",
            title: "结算方式",
            editRender: {},
            params: {
              options: [],
              change: (val, rowIndex, row, options) => {
                row.paymentCycle = options.find(
                  (item) => item.subCode === row.settlementMethodCode
                ).subValue;
                row.settlementMethodName = val.option.label;
              },
              key: "subName",
              value: "subCode",
              label: "subName",
              transfer: true,
            },
            slots: { edit: "select_edit" },
            formatter: ({ cellValue, row }) => {
              return row.settlementMethodName;
            },
          },
          {
            field: "paymentCycle",
            title: "付款周期",
          },
          {
            field: "settlementNodeCode",
            title: "结算时间",
            editRender: {},
            params: {
              options: [],
              change: (val, rowIndex, row, options) => {
                row.settlementNodeName = val.option.label;
              },
              key: "subName",
              value: "subCode",
              label: "subName",
              transfer: true,
            },
            slots: { edit: "select_edit" },
            formatter: ({ cellValue, row }) => {
              return row.settlementNodeName;
            },
          },
          {
            field: "creditBalance",
            title: "信用额度",
            editRender: {},
            slots: { edit: "input_edit" },
            params: {
              type: "number",
              digits: 2,
            },
          },
          {
            field: "warnBalance",
            title: "预警额度",
            editRender: {},
            slots: { edit: "input_edit" },
            params: {
              type: "number",
              digits: 2,
            },
          },
          {
            field: "leftBalance",
            title: "当前剩余",
            editRender: {},
            slots: { edit: "input_edit" },
            params: {
              type: "number",
              digits: 2,
            },
          },
          {
            field: "creditStatus",
            title: "当前状态",
            formatter: ({ cellValue, row }) => {
              const obj = {
                0: "正常",
                1: "超期",
                2: "超额",
                3: "超期超额",
              };
              return obj[cellValue] || "";
            },
          },
          {
            field: "remark",
            title: "备注",
            editRender: {},
            slots: { edit: "input_edit" },
          },
        ],
        multipleSelection: [],
        keepSource: true,
        changeEditNeedTrigger: false,
        keepSourceKey: "channelCategoryCode",
        editRules: {
          channelCategoryCode: [
            {
              required: true,
              message: i18n.global.t("请选择渠道类别"),
              trigger: ["blur"],
            },
          ],
          settlementMethodCode: [
            {
              required: true,
              message: i18n.global.t("请选择结算方式"),
              trigger: ["blur"],
            },
          ],
          settlementNodeCode: [
            {
              required: true,
              message: i18n.global.t("请选择结算时间"),
              trigger: ["blur"],
            },
          ],
        },
        buttonType: ["add", "delete"],
        batchDelete: true,
      },
    ],
    hide: false,
  },
  {
    title: "银行帐户",
    structure: [
      {
        type: "tabs-tabel",
        propType: "accountType",
        prop: "tabelList",
        tableIndex: 3,
        hasPermiAdd: ["common:customer:accountAdd"],
        hasPermiEdit: ["common:customer:accountEdit"],
        hasPermiDelete: ["common:customer:accountDelete"],
        tabelParams: {
          0: {
            prop: "cusBankAccountList",
            tableId: "cusBankAccountList",
            column: 4,
            span: 1,
            columns: [
              {
                type: "checkbox",
                width: 50,
                fixed: "left",
                align: "center",
              },
              {
                field: "bankAccount",
                title: "银行账户",
                editRender: {},
                slots: { edit: "input_edit" },
                formatter: ({ cellValue }) => {
                  return formatBankCard(cellValue);
                },
              },
              {
                field: "bank",
                title: "开户行",
                editRender: {},
                slots: { edit: "input_edit" },
              },
              {
                field: "currencyCode",
                title: "币别",
                editRender: {},
                params: {
                  options: [],
                  change: (val, rowIndex, row, options) => {
                    row.currencyName = val.option.label;
                  },
                  key: "subName",
                  value: "subCode",
                  label: "subName",
                  transfer: true,
                },
                slots: { edit: "select_edit" },
                formatter: ({ cellValue, row }) => {
                  return row.currencyName;
                },
              },
              {
                field: "swiftCode",
                title: "国际代码",
                editRender: {},
                slots: { edit: "input_edit" },
              },
            ],
            multipleSelection: [],
            keepSource: true,
            changeEditNeedTrigger: false,
            keepSourceKey: "bankAccount",
            buttonType: ["add", "delete"],
            batchDelete: true,
          },
          1: {
            prop: "currentCompanyAccountList",
            tableId: "currentCompanyAccountList",
            column: 5,
            span: 1,
            columns: [
              {
                type: "checkbox",
                width: 50,
                fixed: "left",
                align: "center",
              },
              {
                field: "name",
                title: "账户名称",
                editRender: {},
                slots: { edit: "remoteSelect_edit" },
                params: {
                  params: {
                    searchKey: "account",
                    name: "siteName",
                    keyValue: "account",
                    queryId: true,
                    showCustomizedOption: true,
                    abbreviation: "siteCode",
                    displayKey: {
                      customizeLeft: "account",
                      customizeCenter: "currencyName",
                      customizeRight: "bankName",
                    },
                  },
                  apiModule: api.default.system.organization.queryList,
                  handleRemoteChange: (selectedRow, rowIndex, row) => {
                    row.bankAccountName = selectedRow.siteName;
                    row.name = selectedRow.siteName;
                    row.bankAccount = selectedRow.account;
                    row.bank = selectedRow.bankName;
                    row.currencyCode = selectedRow.currencyCode;
                    row.currencyName = selectedRow.currencyName;
                  },
                },
                formatter: ({ cellValue, row }) => {
                  row.name = row.bankAccountName;
                  return row.bankAccountName;
                },
              },
              {
                field: "bankAccount",
                title: "银行账户",
                formatter: ({ cellValue }) => {
                  return formatBankCard(cellValue);
                },
              },

              {
                field: "bank",
                title: "开户行",
              },
              {
                field: "currencyName",
                title: "币别",
              },
              {
                field: "swiftCode",
                title: "国际代码",
              },
            ],
            multipleSelection: [],
            keepSource: true,
            changeEditNeedTrigger: false,
            keepSourceKey: "name",
            buttonType: ["add", "delete"],
            batchDelete: true,
          },
        },
        tabsOptins: [
          {
            value: "0",
            label: "客商账户",
          },
          {
            value: "1",
            label: "我司账户",
          },
        ],
      },
    ],
    hide: false,
  },
]);
onMounted(() => {
  onGetSub();
  if (route.query.id) {
    getInfo();
  }
});
watch(
  () => formData.value?.cusStatus,
  (val) => {
    if (val === 3) {
      columnFilters(formColumns.value, "unifiedSocialCreditCode").disabled = true;
      columnFilters(formColumns.value, "legalRepresentative").disabled = true;
      columnFilters(formColumns.value, "contactPhone").disabled = true;
      columnFilters(formColumns.value, "companySizeCode").disabled = true;
      columnFilters(formColumns.value, "customerRegisteredAddress").disabled = true;
      columnFilters(formColumns.value, "registeredCapital").disabled = true;
      columnFilters(formColumns.value, "registeredCapital").disabled = true;
    }else{
       columnFilters(formColumns.value, "unifiedSocialCreditCode").disabled = false;
      columnFilters(formColumns.value, "legalRepresentative").disabled = false;
      columnFilters(formColumns.value, "contactPhone").disabled = false;
      columnFilters(formColumns.value, "companySizeCode").disabled = false;
      columnFilters(formColumns.value, "customerRegisteredAddress").disabled = false;
      columnFilters(formColumns.value, "registeredCapital").disabled = false;
      columnFilters(formColumns.value, "registeredCapital").disabled = false;
    }
  }
);
const getInfo = async () => {
  const { data } = await api.default.common.customers.getInfo(route.query.id);
  if (data) {
    formData.value = {
      ...data,
      provinceCityArea: [data.provinceCode, data.cityCode, data.areaCode],
      oceanEmployees: data.oceanEmployeesList
        ?.map(
          (item) =>
            `${item.employeeName}${
              item.divideRatio ? `(${item.divideRatio || ""})` : ""
            }`
        )
        .join(","),
      oceanCustomer: data.oceanCustomerServiceList
        ?.map((item) => item.employeeName)
        .join(","),
      airEmployees: data.airEmployeesList
        ?.map(
          (item) =>
            `${item.employeeName}${
              item.divideRatio ? `(${item.divideRatio || ""})` : ""
            }`
        )
        .join(","),
      airCustomerService: data.airCustomerServiceList
        ?.map((item) => item.employeeName)
        .join(","),
      overseaEmployees: data.overseaEmployeesList
        ?.map(
          (item) =>
            `${item.employeeName}${
              item.divideRatio ? `(${item.divideRatio || ""})` : ""
            }`
        )
        .join(","),
      overseaCustomerService: data.overseaCustomerServiceList
        ?.map((item) => item.employeeName)
        .join(","),
      channelCategory: data.channelCategoryList?.map(
        (item) => item.attributeCode
      ),
      belongSite: data.belongSiteList?.map((item) => item.attributeCode),
      salesPlatform: data.salesPlatformList?.map((item) => item.attributeCode),
      accountType: "0",
      currentCompanyAccountList: data.currentCompanyAccountList || [],
      cusBankAccountList: data.cusBankAccountList || [],
    };
  }
};
const onGetSub = async () => {
  const { rows } = await api.default.system.organization.alertList({
    siteRankCode: "001002,001001",
    pageSize: 9999,
  });
  columnFilters(formColumns.value, "belongSite").options = rows;
  getSubZhEn({
    code: "005,018,006,012,008,009,010,017,019,003",
  }).then((res) => {
    columnFilters(formColumns.value, "channelCategory").options = res["005"];
    columnFilters(formColumns.value, "customerTypeCode").options = res["012"];
    columnFilters(formColumns.value, "salesPlatform").options = res["006"];
    columnFilters(formColumns.value, "vipLevelCode").options = res["018"];
    columnFilters(formColumns.value, "companySizeCode").options = res["008"];
    columnFilters(formColumns.value, "channelCategoryCode").params.options =
      res["005"];
    columnFilters(formColumns.value, "settlementMethodCode").params.options =
      res["009"];
    columnFilters(formColumns.value, "settlementNodeCode").params.options =
      res["010"];
    columnFilters(formColumns.value, "coopCustomerTypeCode").params.options = [
      ...res["017"],
      ...res["019"],
    ];
    tabelColumnFilters(
      columnFilters(formColumns.value, "tabelList").tabelParams[0].columns,
      "currencyCode"
    ).params.options = res["003"];
  });
};
const getWebsiteData = async (val, row) => {
  const { data } = await api.default.system.organization.list({
    siteCode: val,
  });
  if (data.length) {
    row.belongSiteCode = data[0].code;
    row.belongSiteName = data[0].label;
  }
};
const onSubmit = () => {
  const params = {
    ...formData.value,
    creditList: formData.value.creditList
      .filter((item) => item.channelCategoryCode)
      .map((item) => {
        return {
          ...item,
        };
      }),
    coopList: formData.value.coopList
      .filter((item) => item.coopCustomerTypeCode)
      .map((item) => {
        return {
          ...item,
        };
      }),
    contactList: formData.value.contactList
      .filter((item) => item.contactName)
      .map((item) => {
        return {
          ...item,
        };
      }),
    cusBankAccountList: formData.value.cusBankAccountList
      .filter((item) => item.bankAccount)
      .map((item) => {
        return {
          ...item,
        };
      }),
    currentCompanyAccountList: formData.value.currentCompanyAccountList
      .filter((item) => item.bankAccountName)
      .map((item) => {
        return {
          ...item,
        };
      }),
  };
  saveBtnLoading.value = true;
  if (!route.query.id) {
    api.default.common.customers
      .add(params)
      .then((res) => {
        ElMessage.success(i18n.global.t("新增成功"));
        saveBtnLoading.value = false;
      })
      .catch(() => {
        saveBtnLoading.value = false;
      });
  } else {
    api.default.common.customers
      .edit(params)
      .then((res) => {
        ElMessage.success(i18n.global.t("修改成功"));
        saveBtnLoading.value = false;
      })
      .catch(() => {
        saveBtnLoading.value = false;
      });
  }
};
</script>

<style lang="scss" scoped>
.customerAdd {
  // padding: 10px;
  height: 100%;
}
</style>